<script src="__CDN__/assets/addons/tongcheng/js/vue.js"></script>
<script src="__CDN__/assets/addons/tongcheng/js/element-ui/index.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/js/element-ui/index.css"></link>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/common.css"></link>

<div class="alert alert-info-light" style="margin-bottom:10px;">
  <b>提示：</b>按固定金额理赔用户，若固定金额大于订单时，将按订单骑手最大收入理赔；若订单抵扣至0元，将不再理赔用户。
</div>

<div id="app">
  <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group hide">
      <label class="control-label col-xs-12 col-sm-2">{:__('Module_id')}:</label>
      <div class="col-xs-12 col-sm-8">
        <input id="c-module_id" data-rule="required" data-source="tongcheng/module/index" class="form-control selectpage"
               name="row[module_id]" type="text" value="{$row.module_id|htmlentities}" disabled>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">{:__('open_claim')}:</label>
      <div class="col-xs-12 col-sm-8 m-t-5">
        <input id="c-open_claim" name="row[open_claim]" type="hidden" value="{$row.open_claim}">
        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-open_claim" data-yes="1"
           data-no="0">
          <i class="fa fa-toggle-on text-success {eq name=" $row.open_claim" value="0"}fa-flip-horizontal text-gray{/eq}
          fa-2x"></i>
        </a>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">预估时间配置:</label>
      <div class="col-xs-12 col-sm-10">
        <input id="c-claim_time_config" name="row[claim_time_config]" type="hidden" value='{:json_encode($row.claim_time_config)}'>

        <el-table
          :data="claim_time_config"
          border
          style="width: 100%">
          <el-table-column
            prop="distance"
            label="路程（公里）">
            <template slot-scope="scope">
              <div v-if="scope.$index == claim_time_config.length - 1">
                当距离等于且超过
                <el-input-number v-model="scope.row.distance" placeholder="路程（公里）" size="small" :min="0" :step="1" step-strictly></el-input-number>
                公里
              </div>

              <div v-else>
                <el-input-number v-model="scope.row.distance" placeholder="路程（公里）" size="small" :min="0" :step="1" step-strictly></el-input-number>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="minutes"
            label="预估分钟数">
            <template slot-scope="scope">
              <div v-if="scope.$index == claim_time_config.length - 1">
                每公里增加
                <el-input-number v-model="scope.row.minutes" placeholder="预估分钟数" size="small" :min="0" :step="1" step-strictly></el-input-number>
                分钟
              </div>

              <div v-else>
                <el-input-number v-model="scope.row.minutes" placeholder="预估分钟数" size="small" :min="0" :step="1" step-strictly></el-input-number>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="removeTimeRule(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="m-t-10">
          <a href="javascript:;" class="btn btn-sm btn-success" @click="addTimeRule()"><i class="fa fa-plus"></i> 追加</a>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">高峰时段配置:</label>
      <div class="col-xs-12 col-sm-10">
        <input id="c-claim_peak_config" name="row[claim_peak_config]" type="hidden" value='{:json_encode($row.claim_peak_config)}'>

        <el-table
          :data="claim_peak_config"
          border
          style="width: 100%">
          <el-table-column
            prop="time_range"
            label="时间段">
            <template slot-scope="scope">
              <el-time-picker
                is-range
                v-model="scope.row.time_range"
                format="HH:mm"
                value-format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="minutes"
            label="延时分钟数">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.minutes" placeholder="延时分钟数" size="small" :min="0" :step="1" step-strictly></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="removePeakRule(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="m-t-10">
          <a href="javascript:;" class="btn btn-sm btn-success" @click="addPeakRule()"><i class="fa fa-plus"></i> 追加</a>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">{:__('claim_mode')}:</label>
      <div class="col-xs-12 col-sm-8 m-t-10">
        <div class="radio">
            {foreach name="claimModeList" item="vo"}
            <label for="row[claim_mode]-{$key}"><input v-model="claim_mode" id="row[claim_mode]-{$key}" name="row[claim_mode]" type="radio" value="{$key}" {in name="key" value="$row.claim_mode"}checked{/in} /> {$vo}</label>
            {/foreach}
        </div>
        <!--<div style="">
          <el-radio-group v-model="claim_mode" @input="changeClaimMode">
            {foreach name="claimModeList" item="vo"}
            <el-radio label="{$key}">{$vo}</el-radio>
            {/foreach}
          </el-radio-group>
        </div>-->
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-12 col-sm-2">理赔金额配置:</label>
      <div class="col-xs-12 col-sm-10">
        <input id="c-claim_money_config" name="row[claim_money_config]" type="hidden" value='{:json_encode($row.claim_money_config)}'>

        <el-table
          :data="claim_money_config"
          border
          style="width: 100%">
          <el-table-column
            prop="minutes"
            label="超时分钟数">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.minutes" placeholder="超时分钟数" size="small" :min="0" :step="1" step-strictly></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="扣费">
            <template slot-scope="scope">
              <div v-if="claim_mode == 'fix'">
                <el-input-number v-model="scope.row.money" placeholder="扣费金额（元）" size="small" :min="0" :step="0.01" step-strictly></el-input-number>
                元
              </div>
              <div v-else-if="claim_mode == 'ratio'">
                <el-input-number v-model="scope.row.ratio" placeholder="扣费百分比（%）" size="small" :min="0" :step="1" step-strictly></el-input-number>
                %
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="removeMoneyRule(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="m-t-10">
          <a href="javascript:;" class="btn btn-sm btn-success" @click="addMoneyRule()"><i class="fa fa-plus"></i> 追加</a>
        </div>
      </div>
    </div>

    <div class="form-group layer-footer">
      <label class="control-label col-xs-12 col-sm-2"></label>
      <div class="col-xs-12 col-sm-8">
        <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
      </div>
    </div>
  </form>
</div>

<script>
  var valid_result = false;
  var _claim_time_config = '{:json_encode($row.claim_time_config)}';
  var _claim_peak_config = '{:json_encode($row.claim_peak_config)}';
  var _claim_money_config = '{:json_encode($row.claim_money_config)}';
  var _controller = null
  var _form = null

  var app = new Vue({
    el: '#app',
    data: {
      claim_mode: '{$row.claim_mode}',
      claim_time_config: [],
      claim_peak_config: [],
      claim_money_config: [],
    },
    created() {
      let claim_time_config = []
      if (_claim_time_config) {
        claim_time_config = JSON.parse(_claim_time_config)
      }
      if (!claim_time_config) {
        this.claim_time_config = []
      } else {
        this.claim_time_config = claim_time_config
      }
      console.log('this.claim_time_config', this.claim_time_config, claim_time_config, _claim_time_config)


      let claim_peak_config = []
      if (_claim_peak_config) {
        claim_peak_config = JSON.parse(_claim_peak_config)
      }
      if (!claim_peak_config) {
        this.claim_peak_config = []
      } else {
        this.claim_peak_config = claim_peak_config
      }
      console.log('this.claim_peak_config', this.claim_peak_config, claim_peak_config, _claim_peak_config)


      let claim_money_config = []
      if (_claim_money_config) {
        claim_money_config = JSON.parse(_claim_money_config)
      }
      if (!claim_money_config) {
        this.claim_money_config = []
      } else {
        this.claim_money_config = claim_money_config
      }
      console.log('this.claim_money_config', this.claim_money_config, claim_money_config, _claim_money_config)

      // this.getForm()
    },
    methods: {
      getForm() {
        var timer = setInterval(() => {
          if (_form) {
            clearInterval(timer);
            console.log('_form3', _form);
            this.bindForm();
          }
        }, 500);
      },
      bindForm() {
        _form.api.bindevent($("form[role=form]"), function(data, ret){
          console.log('bindevent', data, ret);
          if (ret.code == 1) {
            Fast.api.close(data);
          }
          return false;
        });
      },

      // 选择理赔模式
      changeClaimMode(e) {
        console.log('changeClaimMode e', e)
      },

      // 加预估时间规则
      addTimeRule() {
        this.claim_time_config.push({
          distance: 0,
          minutes: 1,
        })

        if (_controller) {
          console.log('trigger bindevent', _controller.api)
          // _controller.api.bindevent();
          setTimeout(() => {
            _controller.api.bindevent();
          }, 500);
        }

        console.log('trigger add', this.claim_time_config)
      },
      removeTimeRule(index) {
        this.claim_time_config.splice(index, 1)
      },

      // 加高峰时段规则
      addPeakRule() {
        this.claim_peak_config.push({
          time_range: ["00:00", "23:59"],
          // time_range: ["11:30", "13:30"],
          // time_range: [new Date(2024, 1, 1, 11, 30, 0), new Date(2024, 1, 1, 13, 30, 0)],//"11:30:00-13:30:00",
          minutes: 1,
        })

        if (_controller) {
          console.log('trigger bindevent', _controller.api)
          // _controller.api.bindevent();
          setTimeout(() => {
            _controller.api.bindevent();
          }, 500);
        }

        console.log('trigger add', this.claim_peak_config)
      },
      removePeakRule(index) {
        this.claim_peak_config.splice(index, 1)
      },

      // 加理赔规则
      addMoneyRule() {
        this.claim_money_config.push({
          minutes: 1,
          money: 1,
          ratio: 0,
        })

        if (_controller) {
          console.log('trigger bindevent', _controller.api)
          // _controller.api.bindevent();
          setTimeout(() => {
            _controller.api.bindevent();
          }, 500);
        }

        console.log('trigger add', this.claim_money_config)
      },
      removeMoneyRule(index) {
        this.claim_money_config.splice(index, 1)
      },

      // 验证
      valid() {
        console.log('trigger valid', this.claim_time_config)
        $('#c-claim_time_config').val(JSON.stringify(this.claim_time_config))
        $('#c-claim_peak_config').val(JSON.stringify(this.claim_peak_config))
        $('#c-claim_money_config').val(JSON.stringify(this.claim_money_config))

        if (parseInt($('#c-open_claim').val()) == 0) {
          valid_result = true
          return true
        }

        if (this.claim_time_config.length === 0) {
          Fast.api.msg('请配置预估时间规则')
          valid_result = false
          return false
        }

        if (this.claim_money_config.length === 0) {
          Fast.api.msg('请配置理赔金额规则')
          valid_result = false
          return false
        }

        valid_result = true
      }
    }
  })
</script>
